<template>
  <div class="home">
    <div class="menu">
      <el-col :span="24">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
        >
          <el-menu-item
            :index="i.id"
            v-for="(i,index) in menuList"
            :default-active="index"
            :key="i.id"
            @click="changeMenu(i.component)"
          >
            <i class="el-icon-menu"></i>
            <span slot="title">{{i.name}}</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </div>
    <div class="content">
        <component :is='com'></component>
    </div>
  </div>
</template>

<script>
import Popups from "../components/popups";
import Location from "../components/location";
import ManyLocation from "../components/manyLocation";
// import Trail from "../components/trail";
import HotMap from "../components/hotmap";
import Cluster1 from "../components/cluster1";
import Draw from "../components/draw";
import Scatter from "../components/scatter.vue";
// import Whmap from "../components/whmap";
import EchartsMap from "../components/echartsMap";
import EchartsMap1 from "../components/echartsMap1";
import EchartsMap2 from "../components/echartsMap2";
import Map3D from "../components/echarts3Dmap.vue";
// import Trail1 from "../components/trail1.vue";
// import Test from '../components/haha.vue'
export default {
  name: "Home",
  data() {
    return {
      menuList: [
        // {
        //   id: "0",
        //   name: "test",
        //   component: Test,
        // },
        {
          id: "1",
          name: "选点",
          component: Popups,
        },
         {
          id: "3",
          name: "弹窗",
          component: ManyLocation,
        },
        {
          id: "2",
          name: "定位与轨迹",
          component: Location,
        },
        // {
        //   id: "4",
        //   name: "轨迹",
        //   component: Trail,
        // },
        {
          id: "5",
          name: "热力图",
          component: HotMap,
        },
        {
          id: "6",
          name: "聚类图",
          component: Cluster1,
        },
        {
          id: "7",
          name: "绘画",
          component: Draw,
        },
        {
          id: "8",
          name: "散点图",
          component: Scatter,
        },
        // {
        //   id: "9",
        //   name: "Echarts地图",
        //   component: Whmap,
        // },
        {
          id: "10",
          name: "Echarts地图（饼图）",
          component: EchartsMap,
        },
        {
          id: "12",
          name: "Echarts地图（柱形图）",
          component: EchartsMap1,
        },
        {
          id: "13",
          name: "Echarts地图（折线图）",
          component: EchartsMap2,
        },
        {
          id: "11",
          name: "3D地图",
          component: Map3D,
        },
        // {
        //   id: "12",
        //   name: "轨迹组件",
        //   component: Trail1,
        // },
      ],
      com: Popups,
    };
  },
  methods: {
    changeMenu(item) {
      this.com = item;
    },
  },
  components: {},
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
}
.menu {
  width: 20%;
  height: 100%;
  border-right: solid 1px #e6e6e6;
  float: left;
}
.content {
  width: 79.91%;
  height: 100%;
  float: left;
}
</style>
